<style scoped>
    .notice-list-page{}

</style>
<template> 
    <div class="notice-list-page">
        <el-form :inline="true" :model="formInline" class="demo-form-inline" style="border-bottom:1px solid #ccc;">
            <el-form-item label="供应商编码" class="selectMB10">
                <el-input  v-model="formInline.partnerCode" placeholder="输入供应商编码"></el-input>
            </el-form-item>
            <el-form-item label="供应商名称" class="selectMB10">
                <el-input v-model="formInline.partnerName"  placeholder="输入供应商名称"></el-input>
            </el-form-item>
            <el-form-item label="订单编号"  class="selectMB10">
                <el-input  v-model="formInline.poCode"  placeholder="输入订单编号"></el-input>
            </el-form-item>
            <el-form-item label="制单人"  class="selectMB10">
                <el-input  v-model="formInline.shipRequestUserName" placeholder="输入PO制单人"></el-input>
            </el-form-item>
            <el-form-item label="制单日期" class="selectMB10">
                <el-date-picker type="date" size="mini" :editable="false" v-model="formInline.createStartDate" placeholder="请选择"  @change="changeCreateStartDate()"></el-date-picker> 至
                <el-date-picker type="date" size="mini" :editable="false" v-model="formInline.createEndDate"  placeholder="请选择"@change="changeCreateEndDate()"></el-date-picker>
            </el-form-item>
            <el-form-item class="selectMB10">
                <el-checkbox v-model="checked">只显示“未通知数量”不等于零的PO</el-checkbox>
            </el-form-item>
            <el-form-item class="selectMB10">
                <el-button class="bolder outsideBtnBS selectAll" :disabled="selectDisabled" size="mini" type="danger" @click="queryNoticeDeliverySheet()">查询</el-button>
            </el-form-item>


        </el-form>

   <!-- PO列表-->
    <label class="default-label">PO列表：</label>
    <el-table :data="NoticeDeliverySheetData" border style="width: 100%;" v-loading.body="loading">
        <el-table-column type="index" header-align="center" align="center" label="序"  width="40"></el-table-column>
        <el-table-column
                label="操作"
                header-align="center" align="center"
                width="120" v-if="powerFlag1 || powerFlag2">
            <template scope="scope">
                <div class="operationItem bolder" v-if="powerFlag2">
                    <router-link :to="{ path: 'CreateNoticeSheet', query: { poCode: scope.row.poCode,smFlag:'0'}}" class="operationItem bolder">通知发货</router-link>
                </div>
               <!-- <div class="operationItem bolder disabled" @click="updateSheet(scope.$index)" v-if="powerFlag1 && scope.row.noticeQuantity==0">修改</div>-->
                <!--<el-button @click="updateSheet(scope.$index)" type="text" size="small" :disabled="scope.row.status=='已审核'">修改</el-button>-->
                <div class="operationItem bolder" @click="updateSheet(scope.$index)" v-if="powerFlag1">修改</div>
            </template>
        </el-table-column>
        <el-table-column
                prop="poCode"
                header-align="center"
                label="PO编号"
                width="140" show-overflow-tooltip>
        </el-table-column>
        <el-table-column
                prop="partnerName"
                header-align="center"
                label="供应商名称"
                width="150" show-overflow-tooltip>
        </el-table-column>
        <el-table-column
                prop="materialQuantity"
                header-align="center"
                label="采购总数量"
                width="120">
        </el-table-column>
        <el-table-column prop="noticeQuantity" label="已通知数量" header-align="center" width="120">
            <template scope="scope">
                <el-button size="mini" @click="showNoticedDetails(scope.$index, scope.row)" class="blueFont">{{scope.row.noticeQuantity}}</el-button>
            </template>
        </el-table-column>
        <el-table-column
                prop="notNoticeQuantity"
                header-align="center"
                label="未通知数量"
                width="120">
        </el-table-column>
        <el-table-column
                prop="createTime"
                header-align="center"
                label="制单日期"
                width="100" show-overflow-tooltip>
        </el-table-column>
        <el-table-column
                prop="creatorName"
                header-align="center"
                label="制单人"
                width="100" show-overflow-tooltip>
        </el-table-column>
        <el-table-column
                prop="statusName"
                header-align="center" align="center"
                label="状态"
                width="100" show-overflow-tooltip>
        </el-table-column>
        <el-table-column
                prop="legalPersonName"
                header-align="center"
                label="法人名称"
                width="120" show-overflow-tooltip>
        </el-table-column>
    </el-table>
        <!--已通知数量明细-->
        <div v-if="showDetails">
            <label class="marginTB"><i>送货明细</i><el-button class="paddingR" size="mini" @click="closeDetails()">关闭</el-button></label>

            <el-table :data="noticedDetailSheets" border style="width: 100%;">

                <el-table-column type="index" header-align="center" align="center" label="序"  width="40"></el-table-column>

                <el-table-column
                        prop="shipRequestNo"
                        header-align="center"
                        label="送货单号"
                        width="130" show-overflow-tooltip>
                </el-table-column>
                <el-table-column
                        prop="createTime"
                        header-align="center"
                        label="送货时间"
                        width="130" show-overflow-tooltip>
                </el-table-column>
                <el-table-column
                        prop="poCode"
                        header-align="center"
                        label="PO"
                        width="130" show-overflow-tooltip>
                </el-table-column>
                <el-table-column
                        prop="materialCode"
                        header-align="center"
                        label="备件编码"
                        width="130" show-overflow-tooltip>
                </el-table-column>
                <el-table-column
                        prop="materialName"
                        header-align="center"
                        label="备件名称"
                        width="120" show-overflow-tooltip>
                </el-table-column>
                <el-table-column
                        prop="standard"
                        header-align="center"
                        label="规格"
                        width="125" show-overflow-tooltip>
                </el-table-column>
                <el-table-column
                        prop="materialUnit"
                        header-align="center"
                        label="计量单位"
                        width="130" show-overflow-tooltip>
                </el-table-column>
                <el-table-column
                        prop="materialQuantity"
                        header-align="center"
                        label="已通知数量"
                        width="130">
                </el-table-column>
                <el-table-column
                        prop="deliveredQuantity"
                        header-align="center"
                        label="已送货数量"
                        width="130">
                </el-table-column>
            </el-table>
        </div>

        <!--修改弹窗-->
        <el-dialog title="通知送货单明细" :visible.sync="dialogTableVisible" :lock-scroll="false">
            <el-table :data="updateSheetData">
                <el-table-column type="index" header-align="center" align="center" label="序"  width="40"></el-table-column>

                <el-table-column prop="shipRequestNo" label="送货通知单号" header-align="center" width="160">
                    <template scope="scope">
                        <el-button type="text" size="small" @click="seeCreate(scope.$index, scope.row)">
                            <!--点击送货单号跳转页面-->
                            <!--<router-link class="blueColor" :to="{ path: 'CreateNoticeSheet', query: { shipRequestNo: scope.row.shipRequestNo,smFlag:'1'}}" >-->
                                {{scope.row.shipRequestNo}}
                            <!--</router-link>-->
                        </el-button>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="currQuantity"
                        header-align="center"
                        label="本次送货数量"
                        width="130">
                </el-table-column>
                <el-table-column
                        prop="createTime"
                        header-align="center"
                        label="制单日期"
                        width="130" show-overflow-tooltip>
                </el-table-column>
                <el-table-column
                        prop="shipRequestUserName"
                        header-align="center"
                        label="制单人"
                        width="130" show-overflow-tooltip>
                </el-table-column>
                <el-table-column
                        prop="shipStatusName"
                        header-align="center" align="center"
                        label="状态"
                        width="120" show-overflow-tooltip>
                </el-table-column>
            </el-table>
        </el-dialog>

        <!--分页-->
        <el-pagination v-if="isPaging" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageIndex"  :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :page-count="totalPage" :total="totalNumber"></el-pagination>
    </div>
</template>

<script>
       export default {
        data() {
            return {
                // 查询表单
                formInline:{
                    partnerCode:"",
                    partnerName:"",
                    poCode:"",
                    shipRequestUserName:"",
                    createStartDate:"",
                    createEndDate:""
                },
                showDetails:false,//默认已通知明细不显示
                noticedDetailSheets:[],//已通知明细数据
                checked:true,//复选框
                showFlag:"1",//默认选中
                loading:false,
                disabled:false,
                NoticeDeliverySheetData: [],// PO单表格数据
                updateSheetData:[],//接收点击修改后返回的数据
                dialogTableVisible: false,
                // 分页
                pageIndex:1,    //当前页（必传）
                pageSize :10,   //每页多少条
                totalNumber: 20,
                totalPage:2,
                isPaging:false,
                //权限
                powerFlag1:false,
                powerFlag2:false,
                //查询禁用
                selectDisabled:false
            };
        },
       computed:{
           powerData(){
               return this.$store.state.powerData;
           }
       },
       watch:{
           powerData(){
               var _this=this;
               for(var i=0;i<_this.powerData.length;i++){
                   if(_this.powerData[i]=="ROLE_security_notificationDelivery_modify"){
                       //通知送货修改权限
                       _this.powerFlag1=true;
                   }
                   if(_this.powerData[i]=="ROLE_security_notificationDelivery_delivery"){
                       //通知送货通知发货权限
                       _this.powerFlag2=true;
                   }
               }
           }
       },
       //进入页面立即运行此方法
       mounted: function () {
            var _this = this;
            _this.$store.commit('currentActive', 'NoticeDeliverySheet');
           //ajax前后查询按钮禁用
           $(".selectAll").ajaxStart(function(){
               _this.selectDisabled=true;
           });
           $(".selectAll").ajaxStop(function(){
               _this.selectDisabled=false;
           });
            _this.queryNoticeDeliverySheet();    //PO列表表单查询
           //判断权限
           for(var i=0;i<_this.powerData.length;i++){
               if(_this.powerData[i]=="ROLE_security_notificationDelivery_modify"){
                   //通知送货修改权限
                   _this.powerFlag1=true;
               }
               if(_this.powerData[i]=="ROLE_security_notificationDelivery_delivery"){
                   //通知送货通知发货权限
                   _this.powerFlag2=true;
               }
           }
       },
        methods: {
            seeCreate(index,row){
                var _this=this;
                _this.$router.push({ path: 'CreateNoticeSheet', query: { shipRequestNo: row.shipRequestNo,smFlag:'1'}});
            },
            //转换日期格式
            switchDate(myDate){
                //console.log(myDate)
                return myDate.getFullYear()+"-"+(myDate.getMonth()+1)+"-"+myDate.getDate();
            },
            //改变日期格式
            changeCreateStartDate(){
                var _this=this;
                if(_this.formInline.createStartDate!=""){
                    _this.formInline.createStartDate=_this.switchDate(_this.formInline.createStartDate);
                }
            },
            changeCreateEndDate(){
                var _this=this;
                if(_this.formInline.createEndDate!=""){
                    _this.formInline.createEndDate=_this.switchDate(_this.formInline.createEndDate);
                }
            },
            // --------查询按钮   查询需要通知发货的PO列表
            queryNoticeDeliverySheet(){
                var _this=this;
                _this.loading=true;
                //判断复选框是否选中，改变showFlag的值
                if(_this.checked){
                    _this.showFlag="1";
                }else{
                    _this.showFlag="0";
                }
                var tmp={
                    partnerCode:_this.formInline.partnerCode,//供应商编号
                    partnerName:_this.formInline.partnerName,//供应商名称
                    poCode:_this.formInline.poCode,  // PO编号
                    shipRequestUserName:_this.formInline.shipRequestUserName, //制单人
                    createStartDate:_this.formInline.createStartDate,//制单开始时间（条件查询所需）
                    createEndDate:_this.formInline.createEndDate,//制单结束时间（条件查询所需）
                    showFlag:_this.showFlag,//0代表全显示，1代表只显示未通知数量不等于0的数据
                    pageIndex:_this.pageIndex,
                    pageSize:_this.pageSize
                };
               //console.log(JSON.stringify(tmp))
                $.ajax({
                    type: 'POST',
                    url: _this.procurement_service+"shipRequest/findShipReqPolist",
                    cache: false,
                    data:JSON.stringify(tmp),
                    dataType:'JSON',
                    contentType: "application/json;charset=utf-8",
                    success: function (data) {
                        //console.log(data)
                        //加一层权限验证，如果返回error,则返回空
                        if (data.success) {
                            _this.loading=false;
                            _this.isPaging=true;
                            _this.totalPage=data.data.totalPage;
                            _this.totalNumber=data.data.totalNumber;
                            _this.NoticeDeliverySheetData=data.data.dataList;
                        }else{
                            _this.common.errorTip(data.errorMessage)
                        }
                    }
                });
            },
            //已通知数量明细
            showNoticedDetails(index,row){
                var _this=this;
                if(row.noticeQuantity==0){
                    _this.common.errorTip("不存在已通知数量！")
                }else{
                    _this.showDetails=true;
                    $.ajax({
                        type: 'GET',
                        url: _this.procurement_service+"shipRequest/findShipReqDetailList?poCode="+row.poCode,
                        cache: false,
                        success: function (data) {
                            //if (data.success) {
                            // console.log(data.dataList);
                            _this.noticedDetailSheets = data.data;
                            /* } else
                             // console.log(data.errorMessage);
                             _this.common.errorTip(data.errorMessage);*/

                        }
                    });
                }
            },
            //关闭已通知数量明细
            closeDetails(){
                var _this=this;
                _this.showDetails=false;
            },
            //修改
            updateSheet(index){
                var _this=this;
                $.ajax({
                    type: 'GET',
                    url: _this.procurement_service+"/shipRequest/findShipReqMessList?poCode="+_this.NoticeDeliverySheetData[index].poCode,
                    cache: false,
                    contentType: "application/json;charset=utf-8",
                    success: function (data) {
                        //console.log(data)
                        if (data.success) {
                            for(var i=0;i<data.data.length;i++){
                                if(data.data[i].shipStatus=="btnSave"){
                                    data.data[i].shipStatusName="已保存"
                                }else if(data.data[i].shipStatus=="btnSubmit"){
                                    data.data[i].shipStatusName="已提交"
                                }
                            }
                            _this.updateSheetData=data.data;
                            _this.dialogTableVisible=true;
                        }else{
                            _this.common.errorTip(data.errorMessage)
                        }
                    }
                });
            },
            //   分页
            handleSizeChange(val) {
                // console.log(`每页 ${val} 条`);
                var _this=this;
                _this.pageSize=val;
                _this.queryNoticeDeliverySheet();

            },
            //点击页码分页查询点击事件
            handleCurrentChange(val) {
                // console.log(`当前页: ${val}`);
                var _this=this;
                _this.pageIndex=val;
                _this.queryNoticeDeliverySheet();
            },

            // // ===================================
            // successTip(p) {     //成功时的提示信息
            //     this.$notify({
            //         title: '成功',
            //         message: p,
            //         type: 'success'
            //     });
            // },
            // errorTip(p) {     //错误提示
            //     this.$notify.error({
            //         title: '错误',
            //         message: p
            //     });
            // }

        }

    }
</script>

<style scoped>
.showSpace{
    margin-bottom:10px;
}
    .marginTB{
        display:block;
        margin:10px 0;
    }
    .paddingR{
        float:right;
    }
    .blueColor{
        color:#0000ff;
    }
</style>

